<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

  <h1>
    我的第一个html
  </h1>
  <p>这是段落</p>

  <p>这是段落里的 <span style="color:red">段落里的行内标签</span> <br> 换行的使用 </p>

  <center>居中的使用</center>

  <h2>横线的使用</h2>
  <hr>

  <a href="https://www.baidu.com">百度 链接的使用</a>
  <p>跳转到段落<a href="#ele_id"> id='ele_id'</a></p>
  <p><a href="cracy3m@163.com">发邮件到我</a></p>

  <div class="Myclass" style="color:blue;background:red;">
    <p>块的使用</p>
    <div class="Subclass" style="color:yellow; background:blue">
      <p>haha</p>
    </div>
  </div>

  <pre>
原始文本的使用
常用于代码的显示
这里的回车就是换行了
</pre>

  <table caption="标题" width=600 height=10 border="1" bgcolor="yellow" bordercolor="red" cellpadding=20 cellspacing=20>

    <tr>
      <!-- tr 一行 -->
      <th>表格标题</th>
      <th>示例</th>
    </tr>
    <tr>
      <td>表格数据</td>
      <td>数据。。。。。。。。</td>
    </tr>
  </table>

  <div class="core attribute" width=128 height=128>
    <!-- 一些核心属性 -->
    <p class="classname" id="ele_id" align="center" style="background:green" width=128 height=200>典型属性</p>
  </div>

  <p>格式化字符串 <b>加粗</b> <u>下画线</u> <del>删除</del> <big>加大</big> <small>变小</small> <sup>上标</sup> <sub>下标</sub> </p>

  <img src="./camera.jpg" alt="找不到图片时 显示这个文字" width="20%" style="display:block; margin:0 auto;">

  <hr>
  无序列表
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <ul type="circle"> Change bullets : 'square', 'circle' or 'disc'
    <li>Pen</li>
    <li>Pencil</li>
    <li>Eraser</li>
  </ul>
  有序列表
  <ol type="1"> Change style : 'i', 'I', '1', 'a' or 'A'
    <li>Pen</li>
    <li>Pencil</li>
    <li>Eraser</li>
  </ol>
  <ol type='i' start="5"> Start from 'v'
    <li>Pen</li>
    <li>Pencil</li>
    <li>Eraser</li>
  </ol>

  带有项目和描述的描述列表：
  <dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
  </dl>

  <br>
  下面是表单
  <form class="myform" action="index.html" method="post">
    <h4>文本输入</h4>
    名称： <input type="text" name="user_name" value="输入名称" size="10" maxlength="20"> <br>
    密码： <input type="password" name="user_passwd" value=""> <br>

    <h4>单选</h4>
    <input type="radio" name="rsel" value=""> 男
    <input type="radio" name="rsel" value=""> 女
    <input type="radio" name="rsel" value="" checked> 保密

    <h4> 多选</h4>
    <input type="checkbox" name="c_male" checked> Male
    <input type="checkbox" name="c_female"> Female
    <input type="checkbox" name="c_infant"> Infant

    <h4> 下拉选择框</h4>
    <select name="s_box">
      <option value="s_male">Male</option>
      <option value="s_female" selected>Female</option>
      <option value="s_infant">Infant</option>
    </select>

    <h4>滑动选择框</h4>
    <select name="s_box" size="4" multiple>
      <option value="s_male" selected>Male</option>
      <option value="s_female" selected>Female</option>
      <option value="s_infant">Infant 1</option>
      <option value="s_infant" selected>Infant 2</option>
      <option value="s_infant">Infant 3</option>
      <option value="s_infant">Infant 4</option>
    </select>

    <h4>像pre标签的 文本范围</h4>
    <textarea rows="10" cols="80" name="txt_area">
Initial Text
  x = 2
  y = 3
</textarea>
    <!-- formatting work as pre -->

  </form>

  <br>
  <h3>表单的各种按钮</h3>
  <form method="get|post" action="jquery.html">
    <h4> Buttons and Hidden</h4>
    Name : <input type="text" name="user_name" size="4" value="Meher" maxlength="16"><br>
    Password : <input type="password" name="user_pass"><br>
    <input type="button" onclick="alert('Hello')" name="b_alert" value="Say Hello" /><br>
    <input type="submit" name="b_submit" value="Go to jQuery" />
    <input type="reset" name="b_reset" value="Reset" /><br>
    <input type="hidden" name="h_data" value="html_tutorial">
  </form>

  <pre>
    form 标签的methon属性
    method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。

    表单数据可被作为 URL 变量的形式来发送（method="get"）或者作为 HTTP post 事务的形式来发送（method="post"）。

    关于 GET 的注释：

        将表单数据以名称/值对的形式附加到 URL 中
        URL 的长度是有限的（大约 3000 字符）
        绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
        对于用户希望加入书签的表单提交很有用
        GET 更适用于非安全数据，比如在 Google 中查询字符串

    关于 POST 的注释：

        将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
        没有长度限制
        通过 POST 提交的表单不能加入书签

  </pre>

</body>

</html>
